<template>
	<!-- 首页功能快捷入口 Grid宫格-->
	<view style="padding: 10px 0;">
		<u-grid :border="false" col="4">
			<u-grid-item v-for="(item, i) in homeItems" :key="i">
				<u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="item.img" :size="24"></u-icon>
				<text class="grid-text">{{ item.title }}</text>
			</u-grid-item>
		</u-grid>
	</view>
	<!-- <uni-grid :column="4" :highlight="true" @change="onChange">
		<uni-grid-item v-for="(item, i) in homeItems" :index="i" :key="i">
			<view class="grid-item-box">
				<image :src="item.img" class="image" mode="aspectFill" />
				<text class="text">{{ item.title }}</text>
			</view>
		</uni-grid-item>
	</uni-grid> -->
</template>

<script>
export default {
	name: 'homeEnter',
	data() {
		return {
			//首页快捷功能入口
			homeItems: [
				{
					title: '新闻资讯',
					routePath: '/pages/working/Working',
					img: '/static/image/menu1.png'
				},
				{
					title: '图片分享',
					routePath: '/pages/working/Working',
					img: '/static/image/menu2.png'
				},
				{
					title: '商品购买',
					routePath: '/pages/working/Working',
					img: '/static/image/menu3.png'
				},
				{
					title: '留言反馈',
					routePath: '/pages/working/Working',
					img: '/static/image/menu4.png'
				},
				{
					title: '视频专区',
					routePath: '/pages/working/Working',
					img: '/static/image/menu5.png'
				},
				{
					title: '联系我们',
					routePath: '/pages/working/Working',
					img: '/static/image/menu6.png'
				}
			]
		};
	},

	methods: {
		onChange(e) {
			let index = e.detail.index;
			//路由跳转到首页
			uni.navigateTo({
				url: this.homeItems[index].routePath
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.grid-text {
	font-size: 12px;
	color: #909399;
	padding: 10rpx 0 20rpx 0rpx;
	/* #ifndef APP-PLUS */
	box-sizing: border-box;
	/* #endif */
}

.image {
	width: 50rpx;
	height: 50rpx;
}

.text {
	font-size: 26rpx;
	margin-top: 10rpx;
}

.grid-item-box {
	flex: 1;
	// position: relative;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 15px 0;
}
</style>
